<template>
  <!-- 左侧导航栏 -->
  <div class="sideBar" ref="sideBarRef">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
let sideBarRef: any = null;
export default defineComponent({
  setup() {
    sideBarRef = ref<HTMLElement>();
    return { sideBarRef };
  },
});

export { sideBarRef };
</script>
<style lang="scss" scoped>
.sideBar {
  width: 15rem;
  position: fixed;
  top: 3rem;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: #fff;
  padding: 0 1rem 2rem 1rem;
  border-right: 1px solid #eaecef;
  transition: 0.3s;
  overflow-y: auto;
}
@media screen and (max-width: 790px) {
  .sideBar {
    left: -15rem;
  }
}
</style>
